<template>
    <el-form :model="formData" :inline="inline" label-width="auto" ref="formRef">
        <el-form-item v-for="field in fields" :key="field.prop" :label="field.label" :prop="field.prop">
            <el-input
                v-if="field.type === 'text' || field.type === 'number' || field.type === 'password' || field.type === 'textarea'"
                v-model="formData[field.prop]" :placeholder="field.placeholder" :clearable="field.clearable"
                :suffix-icon="field.suffix" :prefix-icon="field.prefix" :type="field.type"
                :show-password="field.type == 'password' ? true : false" />
            <el-input-number v-else-if="field.type === 'input-number'" v-model="formData[field.prop]"
                :placeholder="field.placeholder" />
            <el-radio-group v-else-if="field.type === 'radio-group'" v-model="formData[field.prop]">
                <el-radio v-for="option in field.options" :key="option.value" :label="option.value">
                    {{ option.label }}
                </el-radio>
            </el-radio-group>
            <el-select v-else-if="field.type === 'select'" v-model="formData[field.prop]"
                :placeholder="field.placeholder">
                <el-option v-for="option in field.options" :key="option.value" :label="option.label"
                    :value="option.value" />
            </el-select>
            <el-config-provider :locale="zhCn" v-else-if="field.type === 'date-picker'">
                <el-date-picker v-model="formData[field.prop]" :placeholder="field.placeholder" />
            </el-config-provider>
            <el-switch v-else-if="field.type === 'switch'" v-model="formData[field.prop]" />
        </el-form-item>
        <el-form-item v-if="buttons && buttons.length > 0">
            <div class="buttons">
                <b-button :icon="btn.icon" :color="btn.color" :type="btn.btnType" v-for="(btn, index) in buttons"
                    :key="index" @OnClick="handleClick(btn)">{{
                        btn.label
                    }}</b-button>
            </div>
        </el-form-item>
    </el-form>
</template>



<script setup lang="ts">
import { ref } from 'vue';
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import BButton from './BButton.vue';

// 定义表单数据类型
interface FormData {
    [key: string]: any;
}

/**
 * 表单字段接口。
 * 
 * 该接口定义了表单中一个字段的各种属性，用于配置字段的显示、输入行为及样式。
 * 
 * @property {string} prop - 字段的属性名，对应数据对象的键。
 * @property {string} label - 字段的标签，用于显示字段的名称或描述。
 * @property {string} type - 字段的输入类型，决定了输入框的渲染方式。
 * @property {string} [placeholder=?] - 输入框的占位文本，用于提示用户输入内容。
 * @property {{label: string, value: any}[]} [options=?] - 下拉选择框的选项列表，每个选项包含标签和值。
 * @property {any} [locale=?] - 本地化配置，用于支持多语言。
 * @property {boolean} [clearable=?] - 是否允许清空输入内容，通常用于文本输入框。
 * @property {string} [prefix=?] - 字段前的图标或文本，用于增强字段的视觉表现。
 * @property {string} [suffix=?] - 字段后的图标或文本，用于增强字段的视觉表现。
 */
interface Field {
    prop: string;
    label: string;
    type: string;
    placeholder?: string;
    options?: { label: string; value: any }[];
    locale?: any;
    clearable?: boolean;
    prefix?: string;
    suffix?: string;
}

// 定义按钮类型
interface formButton {
    label: string;
    type: string;
    btnType: string;
    icon: string;
    onClick: (...args: any[]) => void;
    color: string;
}

// 定义 props
defineProps<{
    fields: Field[];
    inline?: boolean;
    labelWidth?: string;
    buttons?: formButton[];
}>();

/**
  * Decrement counter.
  */
const formData = ref<FormData>({});

// 定义提交事件
const emit = defineEmits(['submit']);

// 处理按钮点击
const handleClick = (btn: formButton) => {
    if (btn.type == 'submit') {
        btn.onClick(formData);
    } else if (btn.type == 'clearFormData') {
        formData.value = [];
        btn.onClick();
    }
}
</script>

<style scoped>
/* 在这里可以添加自定义样式 */
.buttons {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}
</style>
